﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8">
	<title>游币管理员后台登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/bootstrap.css">

<!--<script type="text/javascript" src="js/jquery.js"></script>-->
	<script src="/js/jquery.js"></script>
	<script src="js/layer.js"></script>
	<script src="/js/bootstrap.min.js"></script>
<!-- MAIN EFFECT -->
<!--<script type="text/javascript" src=js/bootstrap.min.js"></script>-->

<!--	没有找到-->
<!--<link rel="shortcut icon" href="assets/ico/minus.png">-->

<!--<script src="jquery-1.7.2.min.js"></script>-->
<style type="text/css">
#zhong {
	margin-top: 200px;
}

#yzmsj {
	display: none;
}

#1 {
	color: green;
}
</style>


</head>

<body>
	<div id="preloader"></div>
	<div id="container" class="container">
		<div id="zhong">
			<div class="" id="login-wrapper">
				<div class="row">
					<div class="col-md-4 col-md-offset-4">
						<div id="logo-login">
							<h1>游币后台登录页面</h1>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 col-md-offset-4">
						<div class="account-box">
							<form action=""
								method="post">

								<div class="row">
									<div class="col-sm-9">
										<label for="inputUsername">用户名</label>
										<div class="row">
											<div class="col-xs-8 col-sm-12">
												<input  id="inputUsername" type="text"
													required="required" class="form-control" onblur="testUserExist()">
											</div>
											<div class="col-xs-3 col-sm-5">
												<span id="1"></span>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-9">
										<label for="pwd">密码</label> <input id="passwordInput" type="password"
											required="required" 
											class="form-control">
									</div>
								</div>
								
								
								<div class="row">
									<div class="col-sm-9">
										<label for="inputverificationcode">验证码 </label>
										<div class="row">
											<div class="col-xs-8 col-sm-8">
												<input type="text" id="retCode" required="required"  class="form-control">
											</div>
											<div class="col-xs-2 col-sm-2">
												<input class="btn btn-warning" type="button" id="btn"
													value="获取验证码" onclick="refeshCode(this)"/>
											</div>
										</div>
									</div>
								</div>
								
								<div ></div>
								
								<div class="row">
									&nbsp;
								</div>
								<button id="start" class="btn btn btn-primary "  onclick="login()" type="button">登 录
								</button>
								<div  id="code" v-if="getCode == 2">
									用户{{user.userAccount}}的手机号码为{{user.userPhone}},验证码为{{varCode}}
								</div>
							</form>
							<a class="forgotLnk" href="index.jsp"></a>
							<div class="row-block">
								<div class="row"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

	const vmVue = new Vue({
		el: '#container',
		data: {
			user:"",
			varCode:"",
			getCode:1
		}
	});

	function testUserExist(){
		if ($("#inputUsername").val()==""){
			layer.msg("用户名不能为空");
			return;
		}
		$.ajax({
			type:"POST",
			url:"/admin/getUserAdmin",
			data:{username: $("#inputUsername").val()},
			success:function (res) {
				if (res.message != "success"){
					// alert(res.message);
					layer.msg(res.message);
				}else {
					vmVue.user = res.user;
				}
			}
		});
	}

	let data;
	let time = 60;
	function timeCount(val) {
		var timeBtn = $(val);
		if (time===0){
			timeBtn.removeAttr("disabled");
			timeBtn.val("获取验证码");
			time= 60;
			return;
		}else {
			timeBtn.attr("disabled","disabled");
			timeBtn.val('('+time+')');
			time--;
		}
		setTimeout(function () {
			timeCount(val);
		},1000);
	}


	// 全局定义验证码
	var code;
	//显示验证码的部件
	var showCodeEle;
	// 生成验证码s
	function getVeriCode() {
		code = "";
		var codeLength = 4;
		var radom =new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
				'S','T','U','V','W','X','Y','Z');
		for (var i = 0; i < codeLength; i++) {
			// 随机数
			var index = Math.floor(Math.random()*36);
			code+=radom[index];
		}
	}

	// 刷新验证码
	function refeshCode(val) {
		timeCount(val);
		getVeriCode();
		vmVue.getCode=2;
		vmVue.varCode=code;
	}
	//校验验证码
	function validate(){
		// 取得输入的验证码并转化为大写
		var inputEle = $("#retCode");
		var inputCode = inputEle.val().toUpperCase();
		if(inputCode.length <= 0) { //若输入的验证码长度为0
			layer.msg("请输入验证码！");
			return false;
			//则弹出请输入验证码
		}else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
			layer.msg("验证码输入错误！@_@"); //则弹出验证码输入错误
			refeshCode();
			// 清空文本框
			inputEle.val("");
			return false;
		}
		return true;
	}
	//登录功能
	function login(){
		//获取用户名和密码
		let username = $("#inputUsername").val();
		let password = $("#passwordInput").val();
		if (password==""){
			layer.msg("密码不能为空!");
			return;
		}

		if (!validate()){
			return;
		}


		// //校验验证码
		// validate();
		//通过ajax与后台交换数据
		$.ajax({
			type:"POST",
			url:"/admin/login",
			data:{
				username:username,
				password:password
			},
			success:function (res) {
				if (res.message != "success"){
					// alert(res.message);
					layer.msg(res.message);
				}else {
					window.location.href="/admin/";
				}
			}
		});
	}

</script>

</html>
